<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>

<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-adverinfo-add" enctype="multipart/form-data" method="POST">
			<div class="form-group">	
				<label class="col-sm-3 control-label">广告标题：</label>
				<div class="col-sm-8">
					<input id="biaoTi" name="biaoTi" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">广告链接：</label>
				<div class="col-sm-8">
					<input id="lianJie" name="lianJie" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">显示顺序：</label>
				<div class="col-sm-8">
					<input id="shunXu" name="shunXu" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">广告状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
						<input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status" name="status">
						<label class="onoffswitch-label" for="status">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>

				</div>
			</div>
			<!-- 照片添加 -->
			<div class="container">
				<div class="avatar-upload">
					<div class="avatar-edit">
						<input type='file' name="imgPath" id="imageOne" accept=".png, .jpg, .jpeg"/>
						<label for="imageOne"></label>
					</div>
					<div class="avatar-preview">
						<div id="imageOnePreview" style="background-image: url(http://ww3.sinaimg.cn/large/006tNc79ly1g556ca7ovqj30ak09mta2.jpg);width: 550px;height: 330px;">

						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>

	<script type="text/javascript">
		var cropper;
		var prefix = ctx + "system/adverinfo"
		$("#form-adverinfo-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		function submitHandler() {
			if ($.validate.form()) {
				uploadFile();
			}
		}
		function uploadFile() {
			var formData = new FormData();
			if ($('#imageOne')[0].files[0] == null) {
				$.modal.alertWarning("请先选择要上传的图片");
				return false;
			}
			formData.append('biaoTi', $("#biaoTi").val());
			formData.append('lianJie', $("#lianJie").val());
			formData.append('shunXu', $("#shunXu").val());
			formData.append('status', $("#status").val());

			formData.append('files', $('#imageOne')[0].files[0]);
			$.ajax({
				url: prefix + "/add",
				type: 'post',
				cache: false,
				data: formData,
				processData: false,
				contentType: false,
				dataType: "json",
				success: function(result) {
					$.operate.successCallback(result);
				}
			});
		}
		$("#imageOne").change(function() {

			readURLOne(this);
		});

		function readURLOne(input) {
			if (input.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					$('#imageOnePreview').css('background-image', 'url('+e.target.result +')');
					$('#imageOnePreview').hide();
					$('#imageOnePreview').fadeIn(650);
				}
				cropper = reader.readAsDataURL(input.files[0]);
			}
		}



	</script>
</body>
</html>
